<template>
	<view>
		<view class="flex padding-sm text-grey s-title">
			<view class="flex-sub text-left">{{i18n.index.name}}</view>
			<view class="flex-sub text-center">{{i18n.index.nowprice}}</view>
			<view class="flex-sub text-right">{{i18n.index.rise}}</view>
		</view>
<!-- :class="[toggleDelay?'animation-slide-bottom':'hidden']" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" -->
		<view class="flex bg-white " v-for="(item, index) in list_" >

			<view class="flex-twice   padding-sm radius ">
				<view class="uni-flex uni-row margin-top-sm"  @click="onClick(item)">
					<!-- <view style="width:14%;padding-right: 5px;">
						<image class="cu-avatar " :src="item.logo" mode="" style="background: none;"></image>
					</view> -->
					<view style="width:40%;padding-right: 5px;">
						<text class="text-bold">{{item.name.toUpperCase()}}</text>
						<text class="uni-h6">/USDT {{i18n.contract.xu}}</text>
						<!-- <view class="text-bold">{{item.name.toUpperCase()}}{{item.priceUnit}} {{i18n.contract.xu}}</view> -->
						<view class="text-gray nowrap">24h {{item.volume}}</view>
					</view>
					<view style="width:35%;padding-right: 5px;">
						<view  class="text-bold">{{item.price}}</view>
						<!-- <text class="text-gray nowrap">￥{{item.cnyPrice}} CNY</text> -->
					</view>
					<view style="-webkit-flex: 1;flex: 1;text-align: center;"> 
						<view  class="">
							<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="30">
							       <polyline :points="item.points"
							           style="fill:none;stroke-width:3" :style="{stroke:item.change > 0 ? '#01eab9' : '#fa435b'}"/>
							   </svg>
						</view>
						<text style="margin-top: -5px;" class="text-bold " :class="item.change > 0 ? 'text-green' : ' text-red' ">{{item.change}}%</text>
					</view>
					<!-- <view style="-webkit-flex: 1;flex: 1;"> 
						<button :class="item.change > 0 ? 'bai uni-bg-up' : 'bai uni-bg-down' " style="margin-top: 9px;">
							{{item.change > 0 ? '+' : ''}}{{item.change}}%
						</button>
					</view> -->
				</view>
			</view>
		</view>

		<!-- <view class="cu-list grid col-3 " v-for="(item, index) in list_" style="margin-top: 1px;">

			<view class="cu-item text-left" @click="onClick(item)">
				<view class="uni-flex uni-row ">
					<view class="text" style="width:35%;padding-right: 5px;">
						<image class="cu-avatar " :src="item.logo" mode="" style="background: none;"></image>
					</view>
					<view class="text" style="-webkit-flex: 1;flex: 1;">
						<view>
							<view class="text-lg row">{{item.name}}{{item.priceUnit}} {{i18n.contract.xu}}</view>
							 
						</view>

						<text class="text-xs nowrap">24h {{item.volume}}</text>
					</view>
				</view>
			</view>
			<view class="cu-item" @click="onClick(item)">
				<view>
					<view class="text-lg">{{item.price}}</view>
				</view>
				<text>≈{{item.cnyPrice}} CNY</text>
			</view>
			<view class="cu-item" @click="onClick(item)">
				<view class="text-lg" style="margin-top: 9px;">
					<button :class="item.change > 0 ? 'bai uni-bg-up' : 'bai uni-bg-down' ">
						{{item.change > 0 ? '+' : ''}}{{item.change}}%
					</button>
				</view>
			</view>

		</view> -->

	</view>
</template>


<script>
	export default {
		data() {
			return {
				toggleDelay: false
			};
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		computed: {
			list_() {
				return this.list;
			},
			i18n() {
				return this.$t('message');
			}
		},
		mounted() {
			this.toggleDelay=true
		},
		methods: {
			onClick(item) {
				let data = {
					symbol: item.symbol,
					name: item.name,
					priceUnit: item.priceUnit,
					price: item.price
				}
				// uni.navigateTo({
				// 	url: `/pages/trade/kline/main?data=${JSON.stringify(data)}`
				// 	url: `/pages/market/kline?data=${JSON.stringify(data)}`, 
				// })
				uni.setStorageSync('market', data);
				// uni.switchTab({
				// 	url: `/pages/contract/main`
				// })
				uni.switchTab({
					// url: `/pages/trade/main`
					url: `/pages/market/kline?data=${JSON.stringify(data)}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.s-title {
		background-color: $page-color-light;
	}

	.uni-label.uni-label-pointer.light {
		display: block;
		width: 150px;
		/* color: #ffffff; */
		text-align: center;
		float: right;
		/* border-radius: 4upx; */
		padding: 5px 10px;
		border-radius: 8px;
	}

	.row {
		display: inline;
	}

	.bai {
		color: white;
		height: 33px;
		line-height: 33px;
		width: 100px;
	}

	.nowrap {
		white-space: nowrap;
		font-size: 12px;
		font-weight: 400;
	}

	.cu-list {
		margin-top: 2px;
	}

	.cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 0px;
		color: #888;
		font-size: 13px;
		line-height: 20px;
	}
</style>
